﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PaginaPrincipalBT.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.PaginaPrincipalBT" %>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Guía Georeferenciada</title>
    <meta name="generator" content="Bootply" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="Content/bootstrap.min.css" rel="stylesheet">
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>
    <!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
    <link href="Content/stylesPrincipal.css" rel="stylesheet">
    <link href="Content/Carousel.css" rel="stylesheet">
    <script type="text/javascript">

        // VARIABLES GLOBALES JAVASCRIPT
        var geocoder; var marker; var latLng; var latLng2; var map;
        var infowindow; var marcadores = []; var miPos;
        var markerInicial; var myRadius;
        var draw_circle = null; var newinfowindow;


        google.maps.visualRefresh = true;

        // INICiALIZACION DE MAPA

        function initialize() {

            latLng = new google.maps.LatLng(-34.907, -56.157);
            cargarLista();
            cargarListaDestacados();
            var myOptions =
            {
                zoom: 15,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

            ObtenerPosicion();
        }
        function ObtenerPosicion() {
            var options = {
                enableHighAccuracy: true,
                timeout: 45000
            };
            navigator.geolocation.getCurrentPosition(GetPosition, funcionError, options);
            function GetPosition(posicion) {
                miPos = posicion.coords;


                latLng = new google.maps.LatLng(miPos.latitude, miPos.longitude);

                var pinShadow = new google.maps.MarkerImage('<%=ResolveUrl("~/Imagenes/markerPerson.png") %>',
                new google.maps.Size(150, 150),
                new google.maps.Point(0, 0),
                new google.maps.Point(12, 35));


                // CREACION DEL MARCADOR  
                markerInicial = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    draggable: false,
                    icon: pinShadow
                });

                map.setCenter(latLng);

                if (!newinfowindow) {
                    newinfowindow = new google.maps.InfoWindow();
                }
                newinfowindow.setContent("<div style='width: 100px; height: 20px;'> <strong>Usted está aquí</strong><div>");
                newinfowindow.open(map, markerInicial);

                Buscar();

            }
            function funcionError(error) {
                alert(error.message);
            }
        }

        function BuscarFiltro() {
            var filtro = "";
            filtro = $("#inputsearch").val();
            var param = "{'filtro':" + JSON.stringify(filtro) + "}";

            $.ajax({
                type: "POST",
                url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/BusquedaComerciosPrincipal") %>',
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    jQuery.each(data, function (index, item) {
                        items = item;
                        ArmarMapa(item);
                    });
                },
                error: SetTabSessionValueFailed
            });
        }

        function Buscar() {
            $.ajax({
                type: "POST",
                url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/BusquedaCercanos") %>',
                //  data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    jQuery.each(data, function (index, item) {

                        ArmarMapa(item);
                    });
                },
                error: SetTabSessionValueFailed
            });

        }
        function ArmarMapa(item) {
            var ltlngAux = [];
            for (var i = 0; i < marcadores.length; i++) {
                marcadores[i].setMap(null); //Remove the marker from the map
            }

            for (i = 0; i < item.length; i++) {
                ltlngAux.push(new google.maps.LatLng(item[i].Latitud, item[i].Longitud));
            }
            var contador = 0;
            for (var i = 0; i <= ltlngAux.length; i++) {

                if (calcDistance(markerInicial.getPosition(), ltlngAux[i]) < 2000) { //metros   $('#search_radius').val() * 100) {
                    contador++;
                    marker = new google.maps.Marker({
                        map: map,
                        animation: google.maps.Animation.DROP,
                        position: ltlngAux[i]
                    });
                    (function (i, marker) {
                        //Aca armo info de los comercios
                        google.maps.event.addListener(marker, 'click', function () {
                            if (!infowindow) {
                                infowindow = new google.maps.InfoWindow();
                            }
                            infowindow.setContent("<div><a href='VisualizacionDeComerciosBT.aspx?ComId=" + item[i].ComercioId + "&latitud=" + item[i].Latitud + "&longitud=" + item[i].Longitud + "'> Nombre: " + item[i].ComercioNombre + "</a> <br/> Dirección: " + item[i].ComercioDireccion + "<br/> Tel:" + item[i].ComercioTelefono + ' </div>');
                            infowindow.open(map, marker);
                        });

                    })(i, marker);
                    marcadores.push(marker);
                }
            }


        }
        function SetTabSessionValueFailed() {
            alert('call failed');
        }
        function calcDistance(fromLatng, toLatng) {
            return google.maps.geometry.spherical.computeDistanceBetween(fromLatng, toLatng);
        }



        function cargarLista() {
            $.ajax({
                type: "POST",
                url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/ComerciosMejorPuntuados") %>',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    jQuery.each(data, function (index, item) {
                        armarLista(item);
                    });
                },
                error: SetTabSessionValueFailed
            });

        }

        function armarLista(item) {

            if (item.length > 0) {
                for (var i = 0; i <= item.length; i++) {
                    $("#listado").append('<a href="#" class="list-group-item active"> ' +
                            '<h4 class="list-group-item-heading"><b>Nombre del comercio:    </b>' + item[i].ComercioNombre + "</h4> <br /> " +
                            '<p class="list-group-item-text"><b>Dirección:    </b>' + item[i].ComercioDireccion + "</p> <br /> " +
                            '<p class="list-group-item-text"><b>Telefono:    </b>' + item[i].ComercioTelefono + "</p> </a>");
                }
            }
        }
        function SetTabSessionValueFailed() {
            alert('call failed');
        }




        function cargarListaDestacados() {
            $.ajax({
                type: "POST",
                url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/ComerciosDestacados") %>',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    jQuery.each(data, function (index, item) {
                        armarListaDestacados(item);
                    });
                },
                error: SetTabSessionValueFailed
            });

        }
        function armarListaDestacados(item) {
            if (item.length > 0) {
                for (var i = 0; i <= item.length; i++) {
                    $("#listadoDestacado").append('<a href="#" class="list-group-item active"> ' +
                            '<h4 class="list-group-item-heading"><b>Nombre del comercio:    </b>' + item[i].ComercioNombre + "</h4> <br /> " +
                            '<p class="list-group-item-text"><b>Dirección:    </b>' + item[i].ComercioDireccion + "</p> <br /> " +
                            '<p class="list-group-item-text"><b>Telefono:    </b>' + item[i].ComercioTelefono + "</p> </a>");
                }
            }
        }
    </script>

    <script type="text/javascript">
        function sinLogueo() {
            alert('no estoy logueado');
        }

        function cliente() {
            alert('soy cliente');
        }
        function comercio() {
            alert('soy comercio');
        }
        function admin() {
            alert('soy admin');
        }

    </script>

    <!-- Footer -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="~/Content/sticky-footer.css" rel="stylesheet" />
    <script src="~/Content/ie-emulation-modes-warning.js"></script>

    <!-- Footer -->
</head>
<body onload="initialize();">
    <!-- Wraps all page content here -->
    <div id="wrap">
        <header class="masthead">
            <div class="navbar-wrapper">
                <div class="container">
                    <div class="navbar navbar-inverse navbar-stsatic-top" role="navigation" id="navbarbuscar">
                        <form class="navbar-form" style="margin-right: 0px; margin-left: 0px;">
                            <button type="button" onclick="BuscarFiltro();" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                            <input onkeypress="BuscarFiltro();" placeholder="¿Que estás buscando? Ingrese el nombre de un producto, comercio, rubro o tag!" type="search" class="form-control pull-left" id="inputsearch" style="margin-right: 0px; margin-left: 0px;">
                        </form>

                    </div>

                </div>
                <div class="pull-right  hidden-xs">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <h3><i class="glyphicon glyphicon-cog"></i></h3>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="Mantenimientos/Login.aspx"><i class="glyphicon glyphicon-user"></i>Iniciar sesión</a></li>
                        <li><a href="<%= Page.ResolveUrl("~/cerrarSesion.aspx") %>"><i class="glyphicon glyphicon-lock"></i>Cerrar sesión</a></li>
                     
                    </ul>
                </div>
            </div>
            <!-- Carousel
    ================================================== -->
            <div id="map-canvas"></div>
        </header>
        <!-- Fixed navbar -->
        <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav nav-justified">
                    <li runat="server" id="paginaprincipal"><a href="<%= Page.ResolveUrl("~/PaginaPrincipalBT.aspx") %>">Principal</a></li>
                    <li runat="server" id="posicion"><a href="<%= Page.ResolveUrl("~/BusquedaComerciosGeoreferenciado.aspx") %>">Posición</a></li>
                    <li runat="server" id="ampliada"><a href="<%= Page.ResolveUrl("~/BusquedaComercios.aspx") %>">Busqueda ampliada</a></li>
                    <li runat="server" id="cercanos"><a href="<%= Page.ResolveUrl("~/BusquedaComerciosCercanos.aspx") %>">Cercanos</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Gestiones <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="active" runat="server" id="comercios"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeComercios.aspx") %>">Gestión comercio</a></li>
                            <li runat="server" id="usuarios"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeUsuariosFinales.aspx") %>">Gestión Usuario final</a></li>
                            <li runat="server" id="productos"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeProductos.aspx") %>">Mantenimiento de productos</a></li>
                            <li runat="server" id="rubros"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoRubros.aspx") %>">Mantenimiento de rubros</a></li>
                        </ul>
                    </li>
                    <li></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true">
                        <asp:Label ID="lblUsuario" runat="server">Usuario: </asp:Label></span></a></li>

                </ul>
            </div>
            <!--/.nav-collapse -->

            <!--/.container -->
        </div>
        <!--/.navbar -->
        <!-- Begin page content -->
        <div class="divider" id="section1"></div>
        <div class="container">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="page-header text-center">
                    <h1>¿Que es la guía digital georeferenciada?</h1>
                </div>
                <p class="lead text-center">
                    Una nueva forma de ubicar los comercios que necesitas
                </p>
                <p class="text-center">
                </p>
            </div>
            <h1>Comercios destacados</h1>
            <div class="list-group" id="listadoDestacado" runat="server"></div>
            <div class="divider" id="section2">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                    <h1>Comercios mejores valorados</h1>
                    <div class="list-group" id="listado" runat="server">
                    </div>
                </div>
                <!--/col-->
            </div>
            <div class="container" id="section3">
            </div>
            <!--/container-->

            <!-- <div class="divider">DIVIDER</div>-->



        </div>
    </div>

    <footer class="footer" role="contentinfo">
      <div class="container">
            <div style="align-content: center">
                <ul style="list-style: none">
                    <li><a href="<%= Page.ResolveUrl("~/PreguntasFrecuentes.aspx") %>">Preguntas frecuentes</a></li>
                    <li><b style="color: gray">Contáctenos: </b><b style="color: gray">guiageoreferenciada@hotmail.com</b></li>
        </ul>
            </div>
      </div>
    </footer>

    <!-- Footer -->
    <script src="~/Content/ie10-viewport-bug-workaround.js"></script>
    <!-- Footer -->

    <!-- script references -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="Content/bootstrap.min.js"></script>
    <script src="Content/scriptsPrincipal.js"></script>
</body>
</html>
